<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//修改省份
				$("#province").change(function(){
					var id = $(this).val();
					$.ajax({
						url:"/myjsp005/location",
						type:"post",
						data:"id="+id+"&type=province",
						dataType:"json",
						success:function(data){
							var content = "";
							var citys = data.citys;
							for(var i = 0; i < citys.length; i++){
								content += "<option>"+citys[i]+"</option>";
							}
							$("#city").html(content);
							content = "";
							var areas = data.areas;
							for(var i = 0; i < areas.length; i++){
								content += "<option>"+areas[i]+"</option>"
							}
							$("#area").html(content);
						}
					});
				});
				//修改城市
				$("#city").change(function(){
					var id = $(this).val();
					$.ajax({
						url:'/myjsp005/location',
						type:'post',
						data:"id="+id+"&type=city",
						dataType:"json",
						success:function(data){
							var content = "";
							for(var i = 0; i < data.length; i++){
								content += "<option>"+data[i]+"</option>";
							}
							//调用它的html方法相当于把它里面的内容换掉
							$("#area").html(content);
						}
					});
				});
			});
		</script>
	</head>
	<body>
		省：<select id="province">
			<option value="陕西省">陕西省</option>
			<option value="河南省">河南省</option>
			<option value="江苏省">江苏省</option>
		</select>
		市：<select id="city">
			<option value="西安市">西安市</option>
			<option value="宝鸡市">宝鸡市</option>
			<option value="渭南市">渭南市</option>
		</select>
		区：<select id="area">
			<option>雁滩区</option>
			<option>新城区</option>
			<option>白庄镇</option>
		</select>
	</body>
</html>